/* eslint-disable quote-props */
import React, {useState} from 'react';
import {Typography, Form, Row, Col, DatePicker, Space, Button, Select} from 'antd';
import moment from 'moment';
import {useMount, useDebounceFn} from 'ahooks';
import {BizLineList, ClientList, StreamSystemList, dimensionMap} from '../config';
import Charts from './Charts';

import '../style.styl';
import './index.styl';

const {Title} = Typography;
const {Option} = Select;

export default () => {
    const [basicForm] = Form.useForm();
    const [searchParams, setSearchParams] = useState([]);
    const [formLoading, setFormLoading] = useState(true);

    const handleFinish = values => {
        const keys = Object.keys(values);
        const dimensionAndValues = keys?.map(i => ({
            dimensionId: i,
            dimensionName: dimensionMap.get(i).constructor === Object
                ? dimensionMap.get(i).dimensionName
                : dimensionMap.get(i),
            value: (values[i] instanceof moment || moment.isMoment(values[i]))
                ? [values[i].format('YYYY-MM-DD')]
                : [values[i]],
        }));
        setSearchParams(dimensionAndValues);
    };

    const {run: handleDebounceFinish} = useDebounceFn(values => {
        handleFinish(values);
    }, {wait: 500});

    const handleReset = () => {
        basicForm.resetFields();
        basicForm.submit();
    };

    useMount(() => {
        basicForm.submit();
    });

    return (
        <div className="liveBoard">
            <Title level={3}>
                流媒体监控
            </Title>
            <Form
                name="basicForm"
                initialValues={{
                    'StreamingMediaMonitoring_select_dt': moment(),
                    'StreamingMediaMonitoring_select_biz_type': '高途课堂',
                    'StreamingMediaMonitoring_select_client_type': '全部',
                    'StreamingMediaMonitoring_select_engine_type': '全部'
                }}
                labelCol={{span: 6}}
                form={basicForm}
                onFinish={handleDebounceFinish}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            label="日期"
                            name="StreamingMediaMonitoring_select_dt"
                        >
                            <DatePicker
                                format="YYYY-MM-DD"
                                allowClear={false}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="业务线"
                            name="StreamingMediaMonitoring_select_biz_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    BizLineList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="客户端类型"
                            name="StreamingMediaMonitoring_select_client_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    ClientList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            label="流媒体系统"
                            name="StreamingMediaMonitoring_select_engine_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    StreamSystemList?.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={16}>
                        <Row justify="end">
                            <Space>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={formLoading}
                                >
                                    搜索
                                </Button>
                                <Button
                                    htmlType="button"
                                    onClick={handleReset}
                                    loading={formLoading}
                                >
                                    重置
                                </Button>
                            </Space>
                        </Row>
                    </Col>
                </Row>
            </Form>
            <div className="index-search-result">
                <Charts searchParams={searchParams} setFormLoading={setFormLoading} />
            </div>
        </div>
    );
};
